/*
 *
 * (c) Copyright Ascensio System Limited 2010-2023
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/


/*******************************************************************************
  Dropdown action panel
*******************************************************************************/
.studio-action-panel.community {
    box-sizing: border-box;
    width: 240px;
}
.studio-action-panel {
    display: none;
    position: absolute;
    padding: 4px;
    z-index: 1999;
    background-color: @body-color !important;
    border-color: @bg-dropdown-separator !important;
    .borderRadius(4px);
    .boxShadow();
    .noneSelect();

    .corner-top,
    .corner-bottom {
        width: 7px;
        height: 6px;
        position: absolute;

        &.left {
            left: 16px;
        }

        &.right {
            right: 16px;
            left: auto;
        }
    }

    .corner-top {
        background: url("../default/images/dropdown-corner-top.gif") no-repeat transparent;
        top: -5px;
    }

    .corner-bottom {
        background: url("../default/images/dropdown-corner-bottom.gif") no-repeat transparent;
        bottom: -6px;
    }

    .dropdown-content {
        list-style: none outside none;
        margin: 0;
        max-height: 480px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;

        li {
            max-width: 375px;
            overflow: hidden;
            .textOverflowEllipsis();

            &:last-child {
                margin-bottom: 0;
            }

            &.dropdown-item-seporator {
                margin: 8px 0;
                height: 0;
            }
        }

        .dropdown-item,
        .dropdown-item a {
            background: none;
            border: 0;
            color: @textColor;
            cursor: pointer;
            display: block;
            font-size: 12px;
            line-height: 25px;
            margin: 0;
            padding: 0 12px;
            text-decoration: none;
            white-space: nowrap;
        }

        .dropdown-item {
            &.display-none {
                display: none;
            }

            &.active {
                color: @linkColor;
            }

            &.disable {
                color: @textColorGrayLight;

                &:hover {
                    text-decoration: none;
                }
            }

            &:hover,
            &:hover a {
                text-decoration: none;
                background-color: @menu-selected-bg;
                .borderRadius(2px);
            }
        }

        .dropdown-with-item {
            padding-right: 20px;
            position: relative;

            &:after {
                content: url("/skins/default/images/svg/context/@{icon-arrow}");
                right: 4px;
                position: absolute;
                top: 8px;
            }
        }

        .menu-row {
            border-bottom: 1px solid @borderColor;
            cursor: pointer;
            list-style: none outside none;
            outline: none;
            padding: 6px 0 5px;
            z-index: 100;

            &:hover {
                background-color: @hoverTable;
            }

            &:last-child {
                border-bottom: none;
            }

            a,
            span,
            div,
            input {
                outline: none;
            }
        }
    }
    /*******************************************************************************
   Icons for the moduls list
*******************************************************************************/
    &.modules li {

        .menu-products-item {
            padding: 0 12px 0 10px;
        }

        .dropdown-item-svg {
            width: 16px;
            height: 16px;
            fill: @dropdown-items-svg-col;
        }

        .dropdown-item-icon {
            width: 16px;
            height: 16px;
            margin: 8px 5px 0 0;
            float: left;
        }
    }
}

#studio_productListPopupPanel {
    z-index: 2000;

    .wrapper
    {
        position: relative;
        width: 155px;
        max-height: 430px;
        overflow-y: auto;
        overflow-x: hidden;

        &.col2
        {
            width: 310px;
            .columns
            {
                -moz-column-count: 2;
                -webkit-column-count: 2;
                column-count: 2;
            }
        }

        &.col3
        {
            width: 465px;

            .columns
            {
                -moz-column-count: 3;
                -webkit-column-count: 3;
                column-count: 3;
            }
        }
    }

    .columns
    {
        position: relative;
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        -moz-column-gap: 0;
        -webkit-column-gap: 0;
        column-gap: 0;
    }

    .tile
    {
        position: relative;
        width: 155px;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
        column-break-inside: avoid;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        display: table;

        .dropdown-content {
            max-height: none;
        }
    }
}

.create-new-link-list {
    list-style: none outside none;
    padding: 0;
}

.dropdown-item-seporator {
    border-top: 1px solid @bg-dropdown-separator;
    width: 100%;
    margin: 2px 0;
}

.create-new-list-header {
    line-height: 32px;
    padding:0 12px;
    text-transform: uppercase;
}

/*Edge hack bug 37123*/
@supports (-ms-ime-align:auto) {
    .studio-action-panel .dropdown-content li,
    .studio-action-panel .dropdown-content li {
        text-overflow: initial;
        -o-text-overflow: initial;
        -moz-text-overflow: initial;
        -webkit-text-overflow: initial;
    }

    .studio-action-panel .dropdown-content .dropdown-item,
    .studio-action-panel .dropdown-content .dropdown-item a {
        display: inline-block;
        width: 100%;
    }
}

/*******************************************************************************
  Context menu items
*******************************************************************************/

.studio-action-panel .dropdown-content .dropdown-item.with-icon {
    padding: 0 20px 0 24px;
    background-repeat: no-repeat;
    background-position: 4px center;
    float: none;
    position: relative;

    &::before {
        content: "";
        top: 0;
        left: 0;
        width: 24px;
        height: 100%;
        position: absolute;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 4px center;
        mask-position: 4px center;
        background-color: @action-panel-context-bg;
    }

    &.with-toggle {
        padding-right: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .toggle {
            width: 22px;
            height: 13px;
            display: inline-block;
            background: #3B72A7;
            border-radius: 7px;
            margin: 0 4px;
            cursor: pointer;
            text-align: right;

            &.off {
                text-align: left;
                background: @toggle-switcher-bg;
            }

            .switcher {
                width: 9px;
                height: 9px;
                display: inline-block;
                background: white;
                border-radius: 5px;
                margin: 2px;
            }
        }
    }

    &.accept::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_accept.svg");
        mask-image: url("/skins/default/images/svg/context/icon_accept.svg");
    }

    &.access::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_access.svg");
        mask-image: url("/skins/default/images/svg/context/icon_access.svg");
    }

    &.add-email::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_add_email.svg");
        mask-image: url("/skins/default/images/svg/context/icon_add_email.svg");
    }

    &.block::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_block.svg");
        mask-image: url("/skins/default/images/svg/context/icon_block.svg");
    }

    &.call::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_call.svg");
        mask-image: url("/skins/default/images/svg/context/icon_call.svg");
    }

    &.case::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_case.svg");
        mask-image: url("/skins/default/images/svg/context/icon_case.svg");
    }

    &.calendar::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_calendar.svg");
        mask-image: url("/skins/default/images/svg/context/icon_calendar.svg");
    }

    &.chat::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_chat.svg");
        mask-image: url("/skins/default/images/svg/context/icon_chat.svg");
    }

    &.closed-tasks-report::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_closed_tasks_report.svg");
        mask-image: url("/skins/default/images/svg/context/icon_closed_tasks_report.svg");
    }

    &.create::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_create.svg");
        mask-image: url("/skins/default/images/svg/context/icon_create.svg");
    }

    &.create-form::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_create_form.svg");
        mask-image: url("/skins/default/images/svg/context/icon_create_form.svg");
    }

    &.delete::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_delete.svg");
        mask-image: url("/skins/default/images/svg/context/icon_delete.svg");
    }

    &.disable-item::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_disable.svg");
        mask-image: url("/skins/default/images/svg/context/icon_disable.svg");
    }

    &.impersonate-item::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_user.svg");
        mask-image: url("/skins/default/images/svg/context/icon_user.svg");
    }

    &.document::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_document.svg");
        mask-image: url("/skins/default/images/svg/context/icon_document.svg");
    }

    &.download::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_download.svg");
        mask-image: url("/skins/default/images/svg/context/icon_download.svg");
    }

    &.download-as::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_download_as.svg");
        mask-image: url("/skins/default/images/svg/context/icon_download_as.svg");
    }

    &.edit::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_edit.svg");
        mask-image: url("/skins/default/images/svg/context/icon_edit.svg");
    }

    &.email::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_email.svg");
        mask-image: url("/skins/default/images/svg/context/icon_email.svg");
    }

    &.email-v2::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_email_v2.svg");
        mask-image: url("/skins/default/images/svg/context/icon_email_v2.svg");
    }

    &.empty-recycle-bin::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_empty_recycle_bin.svg");
        mask-image: url("/skins/default/images/svg/context/icon_empty_recycle_bin.svg");
    }

    &.enable-item::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_enable.svg");
        mask-image: url("/skins/default/images/svg/context/icon_enable.svg");
    }

    &.export::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_export.svg");
        mask-image: url("/skins/default/images/svg/context/icon_export.svg");
    }

    &.extrn-link::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_extrn_link.svg");
        mask-image: url("/skins/default/images/svg/context/icon_extrn_link.svg");
    }

    &.extrn-link-v2::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_extrn_link_v2.svg");
        mask-image: url("/skins/default/images/svg/context/icon_extrn_link_v2.svg");
    }

    &.favorites::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_favorite.svg");
        mask-image: url("/skins/default/images/svg/context/icon_favorite.svg");
    }

    &.fill-form::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_fill_form.svg");
        mask-image: url("/skins/default/images/svg/context/icon_fill_form.svg");
    }

    &.filter::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_filter.svg");
        mask-image: url("/skins/default/images/svg/context/icon_filter.svg");
    }

    &.form-filling::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_form_filling.svg");
        mask-image: url("/skins/default/images/svg/context/icon_form_filling.svg");
    }

    &.forward::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_forward.svg");
        mask-image: url("/skins/default/images/svg/context/icon_forward.svg");
    }

    &.history::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_history.svg");
        mask-image: url("/skins/default/images/svg/context/icon_history.svg");
    }

    &.image::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_image.svg");
        mask-image: url("/skins/default/images/svg/context/icon_image.svg");
    }

    &.invoice::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_invoice.svg");
        mask-image: url("/skins/default/images/svg/context/icon_invoice.svg");
    }

    &.invoice-draft::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_invoice_draft.svg");
        mask-image: url("/skins/default/images/svg/context/icon_invoice_draft.svg");
    }

    &.invoice-paid::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_invoice_paid.svg");
        mask-image: url("/skins/default/images/svg/context/icon_invoice_paid.svg");
    }

    &.invoice-rejected::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_invoice_rejected.svg");
        mask-image: url("/skins/default/images/svg/context/icon_invoice_rejected.svg");
    }

    &.invoice-send::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_invoice_send.svg");
        mask-image: url("/skins/default/images/svg/context/icon_invoice_send.svg");
    }

    &.link::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_link.svg");
        mask-image: url("/skins/default/images/svg/context/icon_link.svg");
    }

    &.mark-as-important::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_mark_as_important.svg");
        mask-image: url("/skins/default/images/svg/context/icon_mark_as_important.svg");
    }

    &.mark-as-read::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_mark_as_read.svg");
        mask-image: url("/skins/default/images/svg/context/icon_mark_as_read.svg");
    }

    &.move::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_move.svg");
        mask-image: url("/skins/default/images/svg/context/icon_move.svg");
    }

    &.move-or-copy::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_move_or_copy.svg");
        mask-image: url("/skins/default/images/svg/context/icon_move_or_copy.svg");
    }

    &.move-to-milestone::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_move_to_milestone.svg");
        mask-image: url("/skins/default/images/svg/context/icon_move_to_milestone.svg");
    }

    &.new-opportunity::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_new_opportunity.svg");
        mask-image: url("/skins/default/images/svg/context/icon_new_opportunity.svg");
    }

    &.new-tab::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_new_tab.svg");
        mask-image: url("/skins/default/images/svg/context/icon_new_tab.svg");
    }

    &.new-task::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_new_task.svg");
        mask-image: url("/skins/default/images/svg/context/icon_new_task.svg");
    }

    &.notify-responsible::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_notify_responsible.svg");
        mask-image: url("/skins/default/images/svg/context/icon_notify_responsible.svg");
    }

    &.open-folder::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_open_folder.svg");
        mask-image: url("/skins/default/images/svg/context/icon_open_folder.svg");
    }

    &.come-back::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_come_back.svg");
        mask-image: url("/skins/default/images/svg/context/icon_come_back.svg");
    }

    &.open-location::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_open_location.svg");
        mask-image: url("/skins/default/images/svg/context/icon_open_location.svg");
    }

    &.open-mail::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_open_mail.svg");
        mask-image: url("/skins/default/images/svg/context/icon_open_mail.svg");
    }

    &.open-tasks-report::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_open_tasks_report.svg");
        mask-image: url("/skins/default/images/svg/context/icon_open_tasks_report.svg");
    }

    &.permissions::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_permissions.svg");
        mask-image: url("/skins/default/images/svg/context/icon_permissions.svg");
    }

    &.phone::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_phone.svg");
        mask-image: url("/skins/default/images/svg/context/icon_phone.svg");
    }

    &.preview::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_preview.svg");
        mask-image: url("/skins/default/images/svg/context/icon_preview.svg");
    }

    &.print::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_print.svg");
        mask-image: url("/skins/default/images/svg/context/icon_print.svg");
    }

    &.project::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_project.svg");
        mask-image: url("/skins/default/images/svg/context/icon_project.svg");
    }

    &.reassign-data::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_reassign_data.svg");
        mask-image: url("/skins/default/images/svg/context/icon_reassign_data.svg");
    }

    &.rename::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_rename.svg");
        mask-image: url("/skins/default/images/svg/context/icon_rename.svg");
    }

    &.reply::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_reply.svg");
        mask-image: url("/skins/default/images/svg/context/icon_reply.svg");
    }

    &.reply-all::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_reply_all.svg");
        mask-image: url("/skins/default/images/svg/context/icon_reply_all.svg");
    }

    &.restore::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_restore.svg");
        mask-image: url("/skins/default/images/svg/context/icon_restore.svg");
    }

    &.ringtone::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_ringtone.svg");
        mask-image: url("/skins/default/images/svg/context/icon_ringtone.svg");
    }

    &.settings::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_settings.svg");
        mask-image: url("/skins/default/images/svg/context/icon_settings.svg");
    }

    &.sign::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_sign.svg");
        mask-image: url("/skins/default/images/svg/context/icon_sign.svg");
    }

    &.spam::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_spam.svg");
        mask-image: url("/skins/default/images/svg/context/icon_spam.svg");
    }

    &.subtask::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_subtask.svg");
        mask-image: url("/skins/default/images/svg/context/icon_subtask.svg");
    }

    &.subtask-v2::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_subtask_v2.svg");
        mask-image: url("/skins/default/images/svg/context/icon_subtask_v2.svg");
    }

    &.templates::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_template.svg");
        mask-image: url("/skins/default/images/svg/context/icon_template.svg");
    }

    &.track-time::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_track_time.svg");
        mask-image: url("/skins/default/images/svg/context/icon_track_time.svg");
    }

    &.un-notify-responsible::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_un_notify_responsible.svg");
        mask-image: url("/skins/default/images/svg/context/icon_un_notify_responsible.svg");
    }

    &.unlink::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_unlink.svg");
        mask-image: url("/skins/default/images/svg/context/icon_unlink.svg");
    }

    &.unlink-v2::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_unlink_v2.svg");
        mask-image: url("/skins/default/images/svg/context/icon_unlink_v2.svg");
    }

    &.user::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_user.svg");
        mask-image: url("/skins/default/images/svg/context/icon_user.svg");
    }

    &.user-active::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_user_active.svg");
        mask-image: url("/skins/default/images/svg/context/icon_user_active.svg");
    }

    &.user-deactive::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_user_deactive.svg");
        mask-image: url("/skins/default/images/svg/context/icon_user_deactive.svg");
    }

    &.user-new::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_user_new.svg");
        mask-image: url("/skins/default/images/svg/context/icon_user_new.svg");
    }

    &.user-v2::before {
        -webkit-mask-image: url("/skins/default/images/svg/context/icon_user_v2.svg");
        mask-image: url("/skins/default/images/svg/context/icon_user_v2.svg");
    }
}